// pages/culroute/culroute.js
import api from '../../utils/api.js';


Page({

  /**
   * 页面的初始数据
   */
  data: {
    routeId: null,
    // 天数选项
    dayOptions: ['1日游', '2日游', '3日游', '4日游', '5日游及以上'],
    // 景点类型选项
    typeOptions: ['历史遗迹', '人文景观'],
    // 选中的值
    selectedDay: '',
    selectedType: '',
    // 下拉面板显示状态
    dayShow: false,
    typeShow: false,
    //经纬度
    longitude: 110.026918, 
    latitude: 21.453785, 
    spots: [ 
        { name: "街心公园", lat: 21.455002, lng: 110.024359 },
        { name: "安铺民兵连史馆", lat: 21.454817, lng: 110.025004 },
        { name: "东家大井", lat: 21.45678, lng: 110.03180 },
        { name: "骑楼群", lat: 21.45601, lng: 110.023019 },
        { name: "玉枢宫", lat: 21.455386, lng: 110.016742 },
        { name: "文阁塔", lat: 21.457053, lng: 110.012006 }
    ],
    markers: [], 
    polyline: [],
    routeList: null,
    searchParams:{}

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
        routeId: options.id
    });
    const routeId = this.data.routeId;
    console.log("获取到的id是：", routeId);
    this.initMap();
    this.getRouteDetail();
  },

  getRouteDetail(){
    const {routeId,searchParams} = this.data;
    api.route.getRouteListApi(routeId, searchParams).then(res => {
        this.setData({
            routeList: res.routes
        });
    }).catch(err => {
        console.error('加载景点路线失败,', err);
    });
},

  initMap() {
    const { spots } = this.data;
    const mapCtx = wx.createMapContext('myMap', this);

    const markers = spots.map((spot, index) => ({
        id: index,
        latitude: spot.lat,
        longitude: spot.lng,
        iconPath: '',
        width: 40,
        height: 40,
        label: {
            content: spot.name,
            color: '#FFF',
            fontSize: 15,
            borderRadius: 5,
            bgColor: '#CC7B81',
          }
    }));

    //2.生成路线
    const polyline = [{
        points: spots.map(spot => ({
            latitude: spot.lat,
            longitude:spot.lng
        })),
        color: "#000",
        width: 5,
        dottedLine: false
    }];

    //3.设置
    this.setData({markers, polyline}, () => {
        mapCtx.includePoints({
            padding: [10,50,10,50],
            points: spots.map(spot => ({
               latitude: spot.lat,
               longitude: spot.lng
            }))
        });
    });
  },
  // 切换天数下拉面板
toggleDayDropdown() {
    this.setData({
      dayShow: !this.data.dayShow,
      // 关闭另一个下拉面板
      typeShow: false
    });
  },

  // 切换景点类型下拉面板
  toggleTypeDropdown() {
    this.setData({
      typeShow: !this.data.typeShow,
      // 关闭另一个下拉面板
      dayShow: false
    });
  },

  // 选择天数
  selectDay(e) {
    const value = e.currentTarget.dataset.value;
    console.log('选择的天数是：', value);
    let days = 0;
    switch (value){
        case '1日游':
            days = 1;
            break;
        case '2日游':
            days = 2;
            break;
        case '3日游':
            days = 3;
            break;
        case '4日游':
            days = 4;
            break;
        case '5日游及以上':
            days = 5;
            break;
    };
    console.log('days：',days);
    this.setData({
        'searchParams.days': days,
        selectedDay: value,
        dayShow: false
    });
    this.getRouteDetail()
  },

  // 选择景点类型
  selectType(e) {
    const value = e.currentTarget.dataset.value;
    console.log('选择的景点类型是：',value);
    let sceneCategory = 0;
    switch(value){
        case '历史遗迹':
            sceneCategory = 1;
            break;
        case '人文景观':
            sceneCategory = 2;
            break;
    };
    console.log('选择的景点类型是：', sceneCategory);
    this.setData({
      'searchParams.sceneCategory': sceneCategory,
      selectedType: value,
      typeShow: false
    });
    this.getRouteDetail()
  },



  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})